<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>商品详细页</title>
  <link rel="stylesheet" href="./iconfont/font/iconfont.css">
  <link rel="stylesheet" href="./swiper-8.4.7/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/commen.css">
  <link rel="stylesheet" href="./css/information.css">
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 115vw;
    }

    .swiper-wrapper {
      margin-top: 44px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 2.4vw;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .swiper {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>

<body>
  <!-- 头部区域 引入样式commen-->
  <header class="header">
    <a href="#"><span class="iconfont icon-fanhui"></span></a>
    <h3 class="header_title">商品详细页</h3>
  </header>

  <!-- 轮播图区域 -->
  <!-- <div class="information_banner">
    <div class="banner_pic">
      <img src="./uploads/information_banner_1.jpg" alt="">
    </div>
  </div> -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide"><img src="./uploads/information_banner_1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./uploads/information_banner_1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./uploads/information_banner_1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./uploads/information_banner_1.jpg" alt=""></div> -->
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- 价格区域 -->
  <div class="information_info">
    <!-- <div class="price">
      <div class="left">
        <span>￥<i>0.01</i></span>
        <span>￥6699.00</span>
      </div>
      <div class="right">已售1016件</div>
    </div>
    <div class="txt ellipsis-2">三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</div> -->
  </div>

  <!-- 发货与退货说明 -->
  <div class="information_show">
    <div class="information_send">
      <span class="iconfont icon-success"></span>
      <span class="send_txt">七天无理由退货</span>
      <span class="iconfont icon-success"></span>
      <span class="send_txt">48小时发货</span>
    </div>
    <span class="iconfont icon-jinru"></span>
  </div>

  <!-- 发货与退货提示  -->
  <div class="information_tip">
    <div class="information_tip_header">
      <h4>服务</h4>
      <span class="iconfont icon-close"></span>
    </div>
    <div class="information_tip_body">
      <div class="information_tip_top">
        <div class="information_tip_left">
          <span class="iconfont icon-success"></span>
        </div>
        <div class="information_tip_right">
          <div class="information_tip_mes"></div>
          <div class="information_tip_txt"></div>
        </div>
      </div>
      <div class="information_tip_bottom">
        <div class="information_tip_left">
          <span class="iconfont icon-success"></span>
        </div>
        <div class="information_tip_right">
          <div class="information_tip_mes"></div>
          <div class="information_tip_txt"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="information_mask"></div>

  <!-- 评论区域 -->
  <div class="information_comment">
    <div class="comment_count">
      <h4>商品评价(<i>5</i>条)</h4>
      <div class="comment_more">
        <div class="more">查看更多</div>
        <span class="iconfont icon-jinru"></span>
      </div>
    </div>

    <div class="comment_detail">
      <div class="comment_list">
        <div class="comment_list_user">
          <div class="user">
            <img src="./uploads/default-avatar.png" alt="">
          </div>
          <div class="nickname">谷神不死</div>
          <div class="score">
            <!-- <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite"></span> -->
          </div>
        </div>
        <div class="txt">质量很不错 挺喜欢的</div>
        <div class="date">2023-03-21 15:01:35</div>
      </div>

      <!-- <div class="comment_list">
        <div class="comment_list_user">
          <div class="user">
            <img src="./uploads/information_comment_1.png" alt="">
          </div>
          <div class="nickname">谷神不死</div>
          <div class="score">
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
            <span class="iconfont icon-favorite-filling"></span>
          </div>
        </div>
        <div class="txt">又买了一台 真的很喜欢</div>
        <div class="date">2023-03-21 15:02:52</div>
      </div> -->
    </div>
  </div>

  <!-- 商品描述 -->
  <div class="information_details">
    <h3>商品描述</h3>
    <div class="information_pic">
      <!-- <img src="./uploads/information_details_1.jpg" alt=""> -->
    </div>
  </div>

  <!-- 底部区域 -->
  <footer class="information_footer">
    <div class="footer_index">
      <a href="./index.html">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </a>
    </div>
    <div class="footer_cart">
      <a href="./car.html">
        <span class="iconfont icon-icon-test"></span>
        <p>购物车</p>
        <div class="count"></div>
      </a>
    </div>
    <div class="footer_add"><a href="#">加入购物车</a></div>
    <div class="footer_buy"><a href="#">立即购买</a></div>
  </footer>

  <!-- 加入购物车提示框 -->
  <div class="information_addTip">
    <div class="information_addTip_top">
      <div class="addTip_top">
        <div class="addTip_top_left">
          <img src="./uploads/information_add_01.jpg" alt="">
        </div>
        <div class="addTip_top_right">
          <div class="addTip_price">￥<i>189.00</i></div>
          <div class="addTip_inventory">库存:935</div>
        </div>
      </div>
      <div class="addTip_bottom">
        <div class="addTip_bottom_txt">数量</div>
        <div class="addTip_bottom_count">
        <button class="reduce active">-</button>
        <span class="num">1</span>
        <button class="add">+</button>
        </div>
      </div>
    </div>
    <div class="information_addTip_bottom">
      <a href="javascript:;">加入购物车</a>
    </div>
    <span class="iconfont icon-error"></span>
  </div> 

  <!-- 显示加入购物车成功 -->
  <div class="tips">加入购物车成功</div>



  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./swiper-8.4.7/swiper/swiper-bundle.min.js"></script>
  <script src="./js/commen.js"></script>
  <script src="./js/information.js"></script>
  <script>

  </script>
</body>

</html>